<template>
  <div class="home-recommend">
    <section class="personalizeds">
      <HomeTitle>推荐音乐</HomeTitle>
      <ul>
        <PlayListCard
          v-for="item in personalizeds"
          :key="item.id"
          :item="item"
        />
      </ul>
    </section>

    <section class="newsongs">
      <HomeTitle>最新音乐</HomeTitle>
      <ul>
        <SongListItem
          @click.native="$emit('update:currentSong', item)"
          v-for="item in newsongs"
          :key="item.id"
          :item="item"
          :currentSong="currentSong"
          :playing="playing"
        />
      </ul>
    </section>
  </div>
</template>

<script>
import HomeTitle from "@/components/HomeTitle.vue";
import PlayListCard from "@/components/PlayListCard.vue";
import SongListItem from "@/components/SongListItem.vue";

export default {
  props: {
    currentSong: [Object, null],
    playing: Boolean,
  },
  components: {
    HomeTitle,
    PlayListCard,
    SongListItem,
  },
  data: function () {
    return {
      personalizeds: [],
      newsongs: [],
    };
  },

  created: function () {
    this.axios
      .get("https://apis.netstart.cn/music/personalized?limit=6")
      .then((res) => {
        console.log(res, this);
        this.personalizeds = res.data.result;
      });
    this.axios
      .get("https://apis.netstart.cn/music/personalized/newsong")
      .then((res) => {
        console.log(res, this);
        this.newsongs = res.data.result;
      });
  },
};
</script>

<style lang="less">
.home-recommend {
  .personalizeds {
    ul {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>